<template>
  <view class="page-login">
    <view class="login-page-title">君子学堂</view>
    <view class="login-wrap">
      <!-- #ifdef MP-WEIXIN -->
      <view class="self-btn" @click="loginWeixin">
        微信登录
      </view>
      <view class="login-read">
        <!-- <checkbox :value="hasRead" :checked="hasRead" /> -->
        <checkbox-group name="agreement" @change="checkChange">
          <label>
            <checkbox value="checked" :checked="checked" color="#7644FF" style="transform: scale(0.6);" />
            <text>已阅读并同意 <text class="agreement" @click.stop="toAgreement('xsx')">《XXXXX用户服务协议》</text></text>
          </label>
        </checkbox-group>
        <!-- <image src="https://www.moguigame.com/static/login/select.png" class="select-img" mode=""></image>	 -->
      </view>
      <!-- <button open-type="getPhoneNumber" @getphonenumber="phoneLogin">手机号一键登录</button> -->
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <view class="self-phone">136****9668</view>
      <view class="self-tips">本机号码</view>
      <view class="self-btn" @click="toIndex">
        本机号码一键登录
      </view>
      <view class="login-read">
        <!-- <checkbox :value="hasRead" :checked="hasRead" /> -->
        <checkbox-group name="agreement">
          <label>
            <checkbox value="checked" :checked="checked" color="#7644FF" style="transform: scale(0.6);" />
            <text>已阅读并同意 <text class="agreement" @click.stop="toAgreement('xsx')">《XXXXX用户服务协议》</text></text>
          </label>
        </checkbox-group>
        <!-- <image src="https://www.moguigame.com/static/login/select.png" class="select-img" mode=""></image>	 -->
      </view>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <view class="other-login-wrap">
        <view class="other-methods">
          <view class="line"></view>
          <view class="other-methods-title">其他登录方式</view>
          <view class="line"></view>
        </view>
        <view class="mehtods-list">
          <view class="methods-item" @click="toIndex">
            <image src="https://www.moguigame.com/static/login/wx.png" class="login-method-img" mode=""></image>
            微信登录
          </view>
          <view class="methods-item" @click="toIndex">
            <image src="https://www.moguigame.com/static/login/qq.png" class="login-method-img" mode=""></image>
            QQ登录
          </view>
        </view>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        hasRead: false,
        checked: false
      };
    },
    onLoad() {

    },
    methods: {
      checkChange(e) {
        console.log(e.detail.value);
        const val = e.detail.value
        if (val.length > 0) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      toAgreement(url) {
        const str = encodeURIComponent(url)
        uni.navigateTo({
          url: '/pages/web/web?url=' + str
        })
      },
      phoneLogin(e) {
        const {code} = e.detail
        if(code) {
          this.$Api.getMobileByCode({phone_code: code}).then(res => {
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 2000,
              complete() {
                const pages = getCurrentPages()
                if (pages.length > 1) {
                  uni.navigateBack()
                  return
                }
                uni.switchTab({
                  url: '/pages/index/index',
                })
              }
            })
          })
        }
      },
      loginWeixin() {
        if(!this.checked) {
          uni.showToast({
            title: '请先同意用户协议',
            icon: 'none'
          })
          return
        }
        let that = this
        wx.login({
          success(res) {
            if (res.code) {
              that.$Api.postOpenIdByCode({
                code: res.code
              }).then(data => {
                uni.setStorageSync('open_id', data.data.open_id);
                uni.setStorageSync('session_key', data.data.session_key);
                that.$Api.loginByThirdlogin({
                  open_id: data.data.open_id,
                  platform: 'wxmini'
                }).then(resdata => {
                  console.log('www', resdata)
                  uni.showToast({
                    title: '登录成功',
                    icon: 'success',
                    duration: 2000,
                    complete() {
                      const pages = getCurrentPages()
                      if (pages.length > 1) {
                        uni.navigateBack()
                        return
                      }
                      uni.switchTab({
                        url: '/pages/index/index',
                      })
                    }
                  })
                })
                console.log('deeedata', data)
              })

            } else {
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
      },
      toIndex() {
        let that = this
        uni.login({
          "provider": 'weixin',
          "onlyAuthorize": true,
          success(res) {
            if (res.code) {
              that.$Api.postOpenIdByCode({
                code: res.code,
              }).then(res2 => {
                console.log('code: res.code,', res2)
                that.$Api.loginByThirdlogin({
                  open_id: res2.data.open_id,
                  platform: 'wxapp',
                  open_id: res2.data.open_id
                }).then(loginRes => {
                  uni.setStorageSync('hasLogin', 1)
                  uni.switchTab({
                    url: '/pages/index/index'
                  })
                  console.log('wxapp', loginRes)
                })
              })
            }
          },
          fail(err) {
            console.log(err)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .page-login {
    overflow: hidden;
  }

  .login-page-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 56rpx;
    color: #000000;
    line-height: 66rpx;
    margin: 216upx auto;
    text-align: center;
  }

  .self-phone {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 56rpx;
    color: #000000;
    line-height: 66rpx;
    text-align: center;
    margin: 190upx auto 0;
  }

  .self-tips {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 33rpx;
    text-align: center;
  }

  .self-btn {
    width: 654rpx;
    height: 88rpx;
    background: #7644FF;
    border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 88rpx;
    margin: 48upx auto 0;
  }

  .login-read {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
    margin: 96rpx auto 0;
    margin-left: 10rpx;
    
    .agreement {
      color: #7644FF;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
    }
  }

  .other-methods {
    display: flex;
    align-items: center;
    justify-content: center;

    .line {
      width: 114rpx;
      height: 1rpx;
      background-color: #eee;
    }

    &-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      margin: 0 16rpx;
    }
  }

  .other-login-wrap {
    position: absolute;
    bottom: calc(48rpx + constant(safe-area-inset-bottom));
    bottom: calc(48rpx + env(safe-area-inset-bottom));
    left: 0;
    width: 100%;
  }

  .mehtods-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
  }

  .methods-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    &:first-child {
      margin-right: 88rpx;
    }
  }

  .login-method-img {
    height: 96rpx;
    width: 96rpx;
    border-radius: 50%;
    margin-bottom: 8rpx;
  }
</style>